// old 单机模式
import React, { useState, useEffect } from 'react'
import cn from 'classnames'
import i from '@/index.module.css';
import buildImg from '@/assets/images/build.png'
import { Confirm, Message, Loading } from '@knownsec/react-component';
import BreadCrumb from '@/components/BreadCrumb';
import { getSystemNode, modifySysReboot, validateMfa, getOnlineTime } from '~/API/index';
import CheckMfa from '@/components/CheckMfa';
import s from '../systemLoad/style.module.css';
import { getErrorMessage } from '@/common/constant';

export default function SystemControl () {
  const [info, setInfo] = useState([])
  const [mfaVisible, setMfaVisible] = useState(false)
  const [loading, setLoading] = useState(false)
  const [mfaData, setMfaData] = useState({})
  useEffect(() => {
    setLoading(true)
    getSystemNode().then(res => {
      setLoading(false)
      console.log('[ res.data ]-23', res)

      if (res.status === 'success') {
        setInfo([res.data])
        [res.data].forEach(i => {
          getOnline(i.node_ip, res.data)
        })
      }
    })
  }, [])
  const getOnline = async (ip,data) => {
    setLoading(true);
    getOnlineTime({node_ip: ip}).then(res => {
      setLoading(false)
      if(res.status === 'success'){
        let d = []
        data.forEach(i => {
          if(i.node_ip === ip){
            i.time = res.data || '--'
          }
          d.push(i)
        })
        setInfo(d)
      }
    })
  }
  const changeEquipment = (t, ip) => {
    const info = t === 'shutdown' ? '设备关闭后将不能访问系统，您确定要关闭吗？' : '您确定要重启设备吗？'
    Confirm({
			title: '提示',
      className: s.w350,
      message: (<div className={cn(i.tac, i.mb10, i.pr20, i.pl20)}>{info}</div>),
      onconfirm: () => {
        setLoading(true)
        modifySysReboot({ action: t, node_ip: ip }).then(res => {      
          setLoading(false)
          if (res.data?.is_mfa) {
            setMfaData(res.data.args)
            setMfaVisible(true)
          } else {
            Message.show({
              type: res.status,
              message: t=== 'shutdown' ? '关机后，不能访问该系统！' : '请稍候，正在重启中，几分钟内系统不能访问！'
            })
          }
        }).catch(() => {setLoading(false);
            Message.show({ type: 'error', message: getErrorMessage(err.data) })
        })
      }
    })
  }
  const getMfa = val => {
    const obj = Object.assign({}, mfaData)
    obj.mfa_token = val
    setLoading(true)
    validateMfa('POST', obj, true).then(res => {
      if (res.status === 'success') {
        setLoading(false)
        setMfaVisible(false)
        Message.show({
          type: res.status,
          message: res.message
        })
      }
    }).catch(err => setLoading(false), Message.show({ type: 'error', message: getErrorMessage(err) }))
  }
  return (
    <div className={i.mainContent}>
      <BreadCrumb
        arr={[
          { link: '', name: '系统状态' },
          { link: '', name: '系统控制', active: true },
        ]}
      />
      <div className={cn(s.content, i.p24, i.oa, i.h100p, i.mins)}>
        <div className={s.bgc}>
          <div className={cn(i.p24, i.pr)} style={{display: 'flex'}}>
            <Loading show={loading} />
            {info.map(item => {
              return (<div className={s.w380}>
                <div>
                  <div className={cn(i.df, i.aic, i.jcsb, i.p24)}>
                    <div>
                      <svg
                        className={i.vam}
                        width="48px"
                        height="48px"
                        viewBox="0 0 48 48"
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        xlink="http://www.w3.org/1999/xlink"
                      >
                        <g
                          id="页面设计"
                          stroke="none"
                          stroke-width="1"
                          fill="none"
                          fill-rule="evenodd"
                        >
                          <g id="系统状态-系统控制" transform="translate(-208.000000, -191.000000)">
                            <g id="编组-6" transform="translate(208.000000, 191.000000)">
                              <circle
                                id="椭圆形备份-3"
                                stroke="#0B6FD6"
                                fill-opacity="0.1"
                                fill="#0B6FD6"
                                cx="24"
                                cy="24"
                                r="23.5"
                              ></circle>
                              <g
                                id="3.Icon/1.线性/1.基础通用类/电脑"
                                transform="translate(8.000000, 8.000000)"
                              >
                                <path
                                  d="M26,5 C27.1045695,5 28,5.8954305 28,7 L28,20 C28,21.1045695 27.1045695,22 26,22 L17.055,22 L17.0555556,24.9444444 L17.052,24.9994444 L25,25 L25,27 L7,27 L7,25 L15.0571117,25.0007087 L15.0559463,24.9726734 L15.055,22 L6,22 C4.8954305,22 4,21.1045695 4,20 L4,7 C4,5.8954305 4.8954305,5 6,5 L26,5 Z M26,7 L6,7 L6,20 L26,20 L26,7 Z"
                                  id="形状"
                                  fill="#0B6FD6"
                                  fill-rule="evenodd"
                                ></path>
                                <polygon
                                  id="矩形-copy-67"
                                  points="32 9.79717439e-16 32 32 0 32 0 -9.79717439e-16"
                                ></polygon>
                              </g>
                            </g>
                          </g>
                        </g>
                      </svg>
                      <div className={s.systembox}>
                        <span className={cn(i.vamm, i.ml16)}>{item.node_ip}</span>
                        <p className={cn(i.vamm, i.ml16)}>{item.node_name}</p>
                      </div>
                    </div>
                    <div>
                      <span className={i.vam}>运行中</span>
                      <svg
                        className={cn(i.vam, i.ml5)}
                        width="36px"
                        height="36px"
                        viewBox="0 0 36 36"
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        xlink="http://www.w3.org/1999/xlink"
                      >
                        <defs>
                          <radialGradient
                            cx="50%"
                            cy="50%"
                            fx="50%"
                            fy="50%"
                            r="79.6017662%"
                            id="radialGradient-1"
                          >
                            <stop stop-color="#20C850" offset="0%"></stop>
                            <stop
                              stop-color="#77FB96"
                              stop-opacity="0.501047328"
                              offset="100%"
                            ></stop>
                          </radialGradient>
                        </defs>
                        <g
                          id="页面设计"
                          stroke="none"
                          stroke-width="1"
                          fill="none"
                          fill-rule="evenodd"
                        >
                          <g id="系统状态-系统控制" transform="translate(-504.000000, -197.000000)">
                            <g id="编组-10" transform="translate(504.000000, 197.000000)">
                              <g id="编组-8">
                                <path
                                  d="M24.132654,27.1055686 C25.5916552,25.0963219 25.0080547,22.4244475 22.753201,20.6143501 C21.8114484,19.8579586 19.6063956,19.0622516 19.8658586,18.4311506 C21.058589,16.588216 23.3938543,18.0465754 24.846837,19.361569 C26.7409239,21.0752815 28.3692335,20.6463218 29.0502651,18.2094752 C29.7786064,15.6038686 28.4365966,12.2442195 26.2979204,11.3189196 C24.0975541,10.3667664 21.7263996,11.4356052 19.9126009,14.2191208 C19.4515417,14.9286798 19.2448396,16.2770051 18.0806232,15.6028053 C17.212499,15.1009511 17.438712,13.9632731 17.954308,13.1036474 C18.3668982,12.4171337 18.7807464,11.7173913 19.2903732,11.1034012 C21.0641142,8.96799854 20.4996793,7.40091565 17.7267136,6.86657045 C14.9746402,6.33702224 12.014582,7.65762883 11.3216612,9.89495517 C10.4365174,12.7531703 11.9686537,14.5909618 14.2128763,16.0262263 C14.9376657,16.489309 16.2966704,16.7319279 15.575729,17.9032591 C15.0916316,18.6887045 13.9729242,18.4183916 13.0558624,18.0090154 C12.2876853,17.6669949 11.679838,17.1890267 11.0698941,16.6355678 C9.14512247,14.8868916 7.63210243,15.3427046 6.94177162,17.8341231 C6.21611892,20.4505848 7.63173244,23.8200504 9.80827121,24.6570758 C12.2617119,25.6011433 15.2013959,24.5824999 16.6434021,21.3767501 C16.9887279,20.8770224 17.0049829,19.839191 17.7183025,20.105696 C18.4000742,20.3610739 18.4554249,21.1388293 18.3550338,21.7025499 C18.1185103,23.0244175 17.5043239,24.1040124 16.3843338,25.0136109 C14.9921778,26.1439698 15.0891157,27.4615597 16.6378523,28.53569 C18.6582545,29.9359909 22.6243205,29.1820721 24.132654,27.1055686 L24.132654,27.1055686 Z M17.204511,18.7954639 C16.7651336,18.3560922 16.7651924,17.6438306 17.204511,17.2045177 C17.6438296,16.7651755 18.3560711,16.765146 18.795478,17.2045177 C19.2348554,17.6439188 19.234826,18.356151 18.795478,18.7954933 C18.3561594,19.2348061 17.6439178,19.234865 17.204511,18.7954933 L17.204511,18.7954639 Z"
                                  id="形状-copy-2"
                                  fill="url(#radialGradient-1)"
                                  fill-rule="nonzero"
                                  transform="translate(18.000000, 18.000000) rotate(-105.000000) translate(-18.000000, -18.000000) "
                                ></path>
                                <circle
                                  id="椭圆形"
                                  stroke="#E6EAEF"
                                  cx="18"
                                  cy="18"
                                  r="17.5"
                                ></circle>
                              </g>
                            </g>
                          </g>
                        </g>
                      </svg>
                    </div>
                  </div>
                  <div className={cn(i.p24, s.borr)}>
                    <svg
                      className={i.vam}
                      width="16px"
                      height="14px"
                      viewBox="0 0 16 14"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      xlink="http://www.w3.org/1999/xlink"
                    >
                      <g id="页面设计" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                        <g id="系统状态-系统控制" transform="translate(-210.000000, -284.000000)">
                          <g id="编组-6备份-2" transform="translate(208.000000, 281.000000)">
                            <g id="3.Icon/1.线性/2.业务安全类/流量">
                              <path
                                d="M7.13349889,4.21778312 C7.29016011,3.61501791 8.11920884,3.59659727 8.32287258,4.15195851 L10.528125,13.2225 L11.9134932,8.54000245 C12.0664159,8.0230781 12.7470187,7.93744341 13.0317189,8.36829034 L14.454375,11.14875 L17.5,11.1489258 L17.5,12.3989258 L14.0715948,12.3989258 C13.8627544,12.3989258 13.6695961,12.294819 13.554286,12.1246856 L12.6675,10.396875 L11.0677101,15.8053928 C10.8940554,16.3923973 10.0833037,16.3969133 9.88349774,15.8499161 L7.7175,6.94 L6.42029331,11.9311427 C6.35466264,12.1836614 6.140234,12.3662969 5.88571632,12.3949826 L2.5,12.3989258 L2.5,11.1489258 L5.33125,11.14875 L7.13349889,4.21778312 Z"
                                id="路径-24"
                                fill="#999EA8"
                                fill-rule="evenodd"
                              ></path>
                              <rect
                                id="矩形"
                                fill-rule="nonzero"
                                x="0"
                                y="0"
                                width="20"
                                height="20"
                              ></rect>
                            </g>
                          </g>
                        </g>
                      </g>
                    </svg>
                    <span className={cn(i.ml10, i.primaryColor)}>设备运行时间: {item.boot_time_str}</span>
                  </div>
                  <div className={cn(i.pt24, i.pb24, i.df, i.aic)}>
                    <div className={cn(s.flex1)}>
                      <svg
                        className={i.vam}
                        width="14px"
                        height="16px"
                        viewBox="0 0 14 16"
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        xlink="http://www.w3.org/1999/xlink"
                      >
                        <g
                          id="页面设计"
                          stroke="none"
                          stroke-width="1"
                          fill="none"
                          fill-rule="evenodd"
                        >
                          <g id="系统状态-系统控制" transform="translate(-245.000000, -353.000000)">
                            <g id="编组-6备份-3" transform="translate(242.000000, 351.000000)">
                              <g id="3.Icon/4.操作编辑类/刷新">
                                <path
                                  d="M12.9826943,2.27133848 L14.8576943,5.51893375 L11.610099,7.39393375 L10.985099,6.31140199 L12.0676308,5.68640199 C12.1495439,5.63910944 12.2240794,5.5839458 12.2908334,5.52241801 C11.5772839,5.20332177 10.8016419,5.03623948 10,5.03623948 C6.89339828,5.03623948 4.375,7.55463776 4.375,10.6612395 C4.375,13.7678412 6.89339828,16.2862395 10,16.2862395 C13.0511267,16.2862395 15.5348696,13.8569809 15.6226018,10.8270909 L15.625,10.6612395 L16.875,10.6612395 C16.875,14.4581971 13.7969577,17.5362395 10,17.5362395 C6.20304235,17.5362395 3.125,14.4581971 3.125,10.6612395 C3.125,6.86428183 6.20304235,3.78623948 10,3.78623948 C10.9431705,3.78623948 11.8419814,3.97616507 12.6602741,4.31985738 C12.633225,4.20364706 12.5884339,4.08845946 12.5251625,3.97887024 L11.9001625,2.89633848 L12.9826943,2.27133848 Z"
                                  id="路径"
                                  fill="#F67E23"
                                  fill-rule="evenodd"
                                ></path>
                                <rect id="矩形" x="0" y="0" width="20" height="20"></rect>
                              </g>
                            </g>
                          </g>
                        </g>
                      </svg>
                      <span
                        className={cn(i.vam, i.ml10, i.cp, s.start)}
                        onClick={() => changeEquipment('reboot', item.node_ip)}
                      >
                        重启设备
                      </span>
                    </div>
                    <div className={cn(s.flex1, s.bol)}>
                      <svg
                        className={i.vam}
                        width="14px"
                        height="16px"
                        viewBox="0 0 14 16"
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        xlink="http://www.w3.org/1999/xlink"
                      >
                        <g
                          id="页面设计"
                          stroke="none"
                          stroke-width="1"
                          fill="none"
                          fill-rule="evenodd"
                        >
                          <g id="系统状态-系统控制" transform="translate(-426.000000, -353.000000)">
                            <g id="编组-6备份-4" transform="translate(423.000000, 351.000000)">
                              <g id="3.Icon/1.线性/4.操作编辑类/关机">
                                <path
                                  d="M12.6820723,4.42459756 C15.2028638,5.49355105 16.875,7.9710587 16.875,10.7566044 C16.875,14.5535621 13.7969577,17.6316044 10,17.6316044 C6.20304235,17.6316044 3.125,14.5535621 3.125,10.7566044 C3.125,7.9710587 4.52236121,5.69845676 7.31537566,4.42568038 L7.8038465,5.57628728 L7.8038465,5.57628728 C5.74216238,6.45154065 4.375,8.47805497 4.375,10.7566044 C4.375,13.8632062 6.89339828,16.3816044 10,16.3816044 C13.1066017,16.3816044 15.625,13.8632062 15.625,10.7566044 C15.625,8.53884293 14.4868769,6.63102259 12.1940681,5.57628728 L12.6820723,4.42459756 L12.6820723,4.42459756 Z M10.625,2.5 L10.625,8.75 L9.375,8.75 L9.375,2.5 L10.625,2.5 Z"
                                  id="形状"
                                  fill="#FF0000"
                                  fill-rule="evenodd"
                                ></path>
                                <rect id="矩形" x="0" y="0" width="20" height="20"></rect>
                              </g>
                            </g>
                          </g>
                        </g>
                      </svg>
                      <span
                        className={cn(i.vam, i.ml10, i.cp, s.close)}
                        onClick={() => changeEquipment('shutdown', item.node_ip)}
                      >
                        关闭设备
                      </span>
                    </div>
                  </div>
                </div>
              </div>);
            })}
            {info.length==1&&(<div className={s.groupitem}><img src={buildImg} alt="" /><p>购买集群增值服务，添加更多设备</p></div>)}
          </div>
        </div>
      </div>
      <CheckMfa visible={mfaVisible} getMfa={(v) => getMfa(v)} setVis={(v) => setMfaVisible(v)} />
    </div>
  );
}
